import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom/cjs/react-router-dom";
import { Mask, DotLoading } from "antd-mobile";

import { useDispatch } from "react-redux";
import ProofNavigateBar from "@/components/ProofNavigateBar";
import { saveEvent } from "@/store/actions/saveEvent";
import icon_guide_logo from "@/assets/icon_guide_logo.png"
import icon_guide_rate_star from "@/assets/icon_guide_rate_star.png"
import icon_guide_rate_size from "@/assets/icon_guide_rate_size.png"
import icon_guide_rate_download from "@/assets/icon_guide_rate_download.png"
import icon_guide_step_v3_1 from "@/assets/icon_guide_step_v3_1.png"
import icon_guide_step_v3_2 from "@/assets/icon_guide_step_v3_2.png"
import icon_guide_step_v3_3 from "@/assets/icon_guide_step_v3_3.png"
import icon_guide_step_v3_4 from "@/assets/icon_guide_step_v3_4.png"


import './guide.css';
// import AddFavorite from "@/components/AddFavorite";
import AddToHomeGifDialog from "@/components/AddToHomeGifDialog/AddToHomeGifDialog";
import AddHomeEvent from "@/utils/addHomeEvent";
import SignContractAskDialog from "@/components/SignContractAskDialog/SignContractAskDialog";
import SecurityPromptDialog from "@/components/SecurityPromptDialog/SecurityPromptDialog";

/**
 * 引导页
 */
export default function Guide() {

    // loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    // 显示add home弹框
    const [addHomeMaskVisible, setAddHomeMaskVisible] = useState(false);
    const [addHomeMaskIsHomeMode, setAddHomeMaskIsHomeMode] = useState(true);

    //显示安全提示弹框
    const [securityPromptMaskVisible, setSecurityPromptMaskVisible] = useState(false);

    // 获取路由历史 history 对象
    const history = useHistory()

    // 获取 Redux 分发器
    const dispatch = useDispatch()

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    //点击返回
    const onHandleNavGoBack = () => {
        console.log("go back")
        history.replace("/home")
    }

    // 点击add home监听
    const onHandleAddToHome = (type) => {
        console.log(`点击add home监听: ${type}`)
        if (type === 'home') {
            AddHomeEvent.onHandleAddHomeEventClick()
        } else {
            AddHomeEvent.onHandleAddFavoriteEventClick()
        }
    }

    // 关闭add home
    const onHandleAddToHomeClose = () => {
        console.log(`点击close add home监听`)
        setAddHomeMaskVisible(false)
    }

    //已知晓安全事项,关闭提示弹框
    const onHandleSecurityPromptDialogClose = () => {
        // 关闭弹框
        setSecurityPromptMaskVisible(false)

        // 跳转下载页
        history.push("/download");
    }

    // 点击安装事件
    const onHandleInstallClick = () => {
        //打点
        doHitEvent("INSTALL_CLICK")

        // 复制订单号
        // onHandleOrderIdCopy()

        // 显示订单弹框
        setSecurityPromptMaskVisible(true)

        // 1.5秒后打开应用市场
        // setTimeout(() => {
        //     // 打开应用市场
        //     const playUrl = "https://play.google.com/store/apps/details?id=com.mycontract.suitepro"
        //     const params = "&referrer=" + curOrderId
        //     const fullUrl = playUrl + params
        //     window.open(fullUrl, "_blank")
        // }, 1500)

        // 开始下载
        // const fullUrl = process.env.REACT_APP_PATH_APK;
        // window.open(fullUrl, "_blank")

        // 跳转下载页
        // history.push("/download");
    }

    //启动时请求首页额度
    useEffect(() => {
        //获取贷款详情
        try {
            //添加 fb 像素
            // eslint-disable-next-line no-undef
            fbq('trackCustom', 'Page_Guide');
            // eslint-disable-next-line no-undef
            gtag('trackCustom', 'Page_Guide');

            //打点
            doHitEvent("GUIDE_START")

            return () => {
                //打点
                doHitEvent("GUIDE_END")
            }

        } catch (e) {
            console.log(e)
        }
    }, [])

    return (
        <div className="guideRoot guideBackgroundWhite">
            {/* 顶部背景 */}
            {/* <div className="applyTopBackground"></div> */}
            <ProofNavigateBar theme="white" onBackClick={onHandleNavGoBack} onAddFavorite={() => { setAddHomeMaskIsHomeMode(false); setAddHomeMaskVisible(true) }} onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }}>Loan withdrawal in app</ProofNavigateBar>

            {/* 使用添加 home screen bar */}
            {/* <AddFavorite onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }} /> */}

            <div className="guideStepBgV3">
                <div className="guideStatusContent">
                    <img className="guideStatusIcon" src={icon_guide_step_v3_1} alt="" />
                    <div className="guideStatusTitle">{"Your loan qualification has\nbeen approved"}</div>
                </div>

                <div className="guideNextStepContent">
                    <img className="guideNextStepIcon" src={icon_guide_step_v3_2} alt="" />
                    <div className="guideNextStepTitle guideMargionLeft5Px">Next step</div>
                </div>

                <div className="guideNextStepTips guideMargionTop8Px">The product currently only serves Android phone users.</div>

                <div className="guidePlatformContent">
                    <img className="guidePlatformIcon" src={icon_guide_step_v3_3} alt="" />
                    <div className="guidePlatformSpace"></div>
                    <img className="guidePlatformIcon" src={icon_guide_step_v3_4} alt="" />
                </div>

                <div className="guideNextStepTips guideMargionTop5Px">Please log in to the android APP and complete the verification in just one step.</div>
            </div>

            <div className="guideStepBgV3 guideMargionTop25Px">
                <div className="guideAppLogoContent">
                    <img className="guideAppLogoV3" src={icon_guide_logo} alt="" />
                    <div className="guideAppNameContent">
                        <div className="guideAppName">Loan Station- instant cash loan</div>
                        <div className="guideAppDevV3">Zenka Digital Limited</div>
                    </div>
                </div>

                <div className="guideAppRateContent">
                    <div className="guideAppRateItemRow">
                        <img className="guideAppRateStarImgV3" alt="" src={icon_guide_rate_star} />
                        <div className="guideAppRateValueV3">4.6</div>
                    </div>

                    <div className="guideAppRateLineV3"></div>

                    <div className="guideAppRateValueAgeV3">18+</div>

                    <div className="guideAppRateLineV3"></div>

                    <div className="guideAppRateItemRow">
                        <img className="guideAppRateStarImgV3" alt="" src={icon_guide_rate_size} />
                        <div className="guideAppRateValueV3">3M</div>
                    </div>

                    <div className="guideAppRateLineV3"></div>

                    <div className="guideAppRateItemRow">
                        <img className="guideAppRateStarImgV3" alt="" src={icon_guide_rate_download} />
                        <div className="guideAppRateValueV3">100K+</div>
                    </div>
                </div>

                {/* 去应用市场 */}
                <div className="guideAppInstallContent guideBackgroundBlue" onClick={() => { onHandleInstallClick() }}>
                    {/* <img className="guideAppInstallImg" alt="" src={icon_guide_app_install} /> */}
                    <div className="guideAppInstallTitle">Install</div>
                </div>

                {/* 底部提示 */}
                <div className="guideAppTipsDetail guideFontBlack">You can install applications produced by licensed organizations with confidence.</div>
                <div className="guideAppTipsDetail guideFontBlack guideAppBottomMargin16px">Please do not install apps through other channels to avoid being scammed.</div>
            </div>

            {/* add home gif dialog */}
            <AddToHomeGifDialog visible={addHomeMaskVisible} onConfirm={onHandleAddToHome} onClose={onHandleAddToHomeClose} isHomeMode={addHomeMaskIsHomeMode} />

            {/* 安全提示弹框 */}
            <SecurityPromptDialog visible={securityPromptMaskVisible} onClose={onHandleSecurityPromptDialogClose} />

            {/* load mask */}
            <Mask visible={maskVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="overlayContent">
                    <span style={{ fontSize: 24, color: '#ff3141' }} >
                        <DotLoading color="currentColor" />
                    </span>
                </div>
            </Mask>
        </div >
    )
}